<template>
	<view class="container">
		<view style="background: linear-gradient(to top right, #007CEC, #00BEE8);">
			<view style="text-align: center;color: #fff;font-size: 18px;padding-top: 60px;">全国货源</view>
			<view style="overflow: hidden;display: block;height: 120px;padding-top: 20px;width: 98%;margin: 0 auto;margin-bottom: 10px;">
				<view @click="dzshow=true" style="color: #fff;text-align: center;width: 20%;float: left;font-size: 14px;height:30px;line-height: 30px;">
					<text>{{jname.name1}}</text>
					<text class="tn-icon-down-triangle"></text>
				</view>
				<view  style="width: 60%;float: left;font-size: 14px;border-radius: 3px;background: #59B9F1;height:30px;">
					<input  style="height: 30px;width: 100%;line-height: 30px;color: #fff;font-size: 28rpx;padding-left: 3px;" 
					type="text" name="" placeholder="请输入关键词进行搜索" @confirm="getsearch"
						v-model="jname.searchValue">
				</view>
				<view style="width: 20%;float: left;">
					<view @click="show=true"  style="width: 90%;height: 30px;diplay:black;
					border-radius: 3px;background-color: #fff;color: #00A6E9;
					font-weight: 600;text-align: center;line-height: 30px;margin-left: 3px;">发布</view>
				</view>
			</view>
		</view>
		<view style="background-color: #fff;width: 100%;margin: 0 auto;margin-top: -60px;border-radius: 5px;padding-bottom: 20px;">
			<tn-tabs :list="list" :current="current" activeColor="#1678FF" :barWidth="50" @change="change"></tn-tabs>
			<view style="overflow: hidden;display: block;background-color: #fff;">
				<view style="width: 20%;display: block;float: left;margin-top: 5px;" v-for="(item,index) in clist"
					:key="index">
					<image :src="item.image"
						style="display: block;width: 42px;height: 42px;margin: 0 auto;border-radius: 100%;" mode="">
					</image>
					<text style="display: block;text-align: center;margin-top: 5px;">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view
			style="overflow: hidden;background-color: #ffffff;box-shadow: 5px 5px 5px 5px rgba(225, 225, 225, 0.5);width: 100%;margin: 0 auto;border-radius: 5px;">
			<view @click="dzshow=true"
				style="width: 50%;text-align: center;float: left;height: 36px;line-height: 36px;">
				{{jname.name1}}<text class="tn-icon-down-triangle"></text>
			</view>
			<view @click="pickerShow = true"
				style="width: 50%;text-align: center;float: left;height: 36px;line-height: 36px;">
				{{jname.name2}}<text class="tn-icon-down-triangle"></text>
			</view>
		</view>
	
	
		<view class="content" style="background-color: #f0f0f0;min-height: 1100rpx;overflow: auto;">
			<lists v-show="current==0" :types="0" :listall="hylist"></lists>
			<lists v-show="current==1" :types="1" :listall="cglist"></lists>
			<mlist v-show="current==2" :listall="zblist"></mlist>
		</view>
		<tn-popup v-model="show" mode="bottom" width="400rpx">
			<view style="background-color: #fff;">
				<view style="overflow: hidden;height: 200px;">
					<view style="float: left;width: 50%;" @click="got('/pages/job/addfb')">
						<text style="font-size: 28px;border: 3px solid #0ECD96;
					  color: #0ECD96;font-weight: 600;
					  border-radius: 200px;height: 66px;width: 66px;
					  line-height: 66px;text-align: center;display: block;margin: 0 auto;margin-top: 30px;">卖</text>
						<text
							style="text-align: center;display: block;margin: 0 auto;margin-top: 5px;font-size: 22px;font-weight: 600;">发布供应</text>
						<text
							style="color: #0ECD96;text-align: center;display: block;margin: 0 auto;margin-top: 5px;font-size: 22px;font-weight: 600;">采购商都能看见</text>
					</view>
					<view style="float: left;width: 50%;" @click="got('/pages/job/addcg')">
						<text style="font-size: 28px;border: 3px solid #FBD3D1;
					  color: #FE0500;font-weight: 600;
					  border-radius: 200px;height: 66px;width: 66px;
					  line-height: 66px;text-align: center;display: block;margin: 0 auto;margin-top: 30px;">买</text>
						<text
							style="text-align: center;display: block;margin: 0 auto;margin-top: 5px;font-size: 22px;font-weight: 600;">发布供应</text>
						<text
							style="color: #FE0500;text-align: center;display: block;margin: 0 auto;margin-top: 5px;font-size: 22px;font-weight: 600;">采购商都能看见</text>

					</view>
				</view>
				<view @click="show=false"
					style="text-align: center;font-size: 18px;height: 36px;line-height: 36px;font-weight: 600;">
					取消
				</view>
			</view>
		</tn-popup>
		<tn-popup v-model="dzshow" mode="right" width="600rpx">
			<nyn :hot="true" @bindCity="bindCity"></nyn>
		</tn-popup>
		<!-- <tn-picker v-model="dzshow" mode="region" :params="params" @confirm="regionPickerConfirm"></tn-picker> -->
		<tn-select v-model="pickerShow" mode="single" valueName="id" labelName="name" :list="clist"
			@confirm="confirm"></tn-select>
		<!-- <tn-picker
		  v-model="dzshow"
		  :params="params"
		  mode="region"
		  @confirm="regionPickerConfirm"
		></tn-picker> -->
		<tabbar :curls="1"></tabbar>
	</view>
</template>

<script>
	import nyn from '@/components/nyn-city-list/nyn-city-list.vue'
	import mlist from '@/components/mlist/mlist.vue'
	import lists from '@/components/lists/lists.vue'
	import {
		getcList,
		getzbList,
		gethylist,
		getcglist
	} from '@/apis/hy.js'
	import {
		getcalls
	} from '@/apis/clist.js'
	export default {
		components: {
			mlist,
			lists,
			nyn
		},
		data() {
			return {
				params: {
					province: true,
					city: true,
					area: false
				},
				pickerShow: false,
				show: false,
				dzshow: false,
				addcg: false,
				// searchValue: null,
				list: [{
					name: '行情卖货'
				}, {
					name: '采购信息'
				}, {
					name: '招标信息'
				}],
				currents: 0,
				current: 0, // tab选项
				banList: [],
				jname: {
					searchValue: '',
					name1: '全国',
					address: '',
					cid: '',
					name2: '分类',
				},
				clist: [],
				hylist: [],
				cglist: [],
				zblist: [],
				jobList: [],
			}
		},
		onLoad() {
			this.getcLists('行情卖货')
			this.getzblists()
			this.gethylists()
			this.getcglists()
		},
		methods: {
			bindCity(event) {
				let currents = this.currents
				this.jname.name1 = event.name
				if (event.name == '全国') {
					this.jname.address = ''
				} else {
					this.jname.address = event.name
				}
				this.dzshow = false
				if (currents == 0) {
					this.gethylists()
				}
				if (currents == 1) {
					this.getcglists()
				}
				if (currents == 2) {
					this.getzblists()
				}

				console.log(event)
			},
			getsearch() {
				console.log('开始搜索');
				let currents = this.currents
				if (currents == 0) {
					this.gethylists()
				}
				if (currents == 1) {
					this.getcglists()
				}
				if (currents == 2) {
					this.getzblists()
				}
			},
			// 点击地区选择器
			regionPickerConfirm(event) {
				// this.jname.name1 = event.province.label + '-' + event.city.label + '-' + event.area.label
				this.jname.name1 = event.city.label
				this.jname.address = event.city.label
			},
			confirm(e) {
				console.log(e);
				let currents = this.currents
				this.jname.cid = e[0].value
				this.jname.name2 = e[0].label
				if (currents == 0) {
					this.gethylists()
				}
				if (currents == 1) {
					this.getcglists()
				}
				if (currents == 2) {
					this.getzblists()
				}
			},
			got(e) {
				uni.navigateTo({
					url: e
				})
			},
			//采购
			getcglists() {
				getcglist(this.jname).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.cglist = res.data
					}
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},

			//货源
			gethylists() {
				gethylist(this.jname).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.hylist = res.data
					}
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},
			getcLists(e) {
				getcalls({
					name: e
				}).then(res => {
					if (res.code == 200) {
						this.clist = res.data
					}
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},
			getzblists() {
				getzbList(this.jname).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.zblist = res.data
					}
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},
			gotos1(e) {
				uni.navigateTo({
					url: '/pages/job/fbdetail?id=' + e
				})
			},
			gotos2(e) {
				uni.navigateTo({
					url: '/pages/job/cgdetail?id=' + e
				})
			},
			change(e, a) {
				console.log(e)
				this.current = e
				let name = this.list[e].name
				this.getcLists(name)

			},
			//Change Tab
			changeTab(item, index) {
				this.current = index;
			},
			// Start Search
			startSearch() {
				uni.showToast({
					title: this.searchValue,
					duration: 1500,
					icon: 'none'
				})
			},
			// Click Item
			clickJobInfo(item, index) {
				uni.navigateTo({
					url: '/pagesJob/jobDetail/jobDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			// Click Addjob
			addJob() {
				uni.showToast({
					title: '点击了加号',
					duration: 1500,
					icon: 'none'
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}
	/* // 去掉页面滚动条 */
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	.tatils {
		color: #fff;
	}
	.input-placeholder{
		font-size: 26rpx;
		color: #ffffff;
		padding-left: 3px;
	}
	.dflex() {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 自定义导航栏内容 end */
	.tv1 {
		// text-align: justify;
		// height: 18px;
		// line-height: 18px;
		// font-size: 12px;
		display: block;
		// white-space: nowrap;
		/* 确保文本在一行内显示 */
		overflow: hidden;
		/* 隐藏溢出的内容 */
		// text-overflow: ellipsis;
		/* 超出部分显示为省略号 */
	}

	.dflexsb() {
		.dflex();
		justify-content: space-between;
	}

	.dflexsa() {
		.dflex();
		justify-content: space-around;
	}

	.bIcon1 {
		width: 100%;
		height: 100%;
	}

	.ctznav {
		float: left;
		width: 48%;
		margin-left: 5px;
		background-color: #fff;
		padding: 5px;

		.ctz {
			text-align: left;
			height: 20px;

			span {
				font-size: 12px;
			}
		}
	}

	.container {
		// min-height: 500px;
		// height: 100%;
		width: 100%;
		max-height: 200vh;
		font-family: PingFangSC-Semibold, PingFang SC;
		// padding: 30rpx;
		// box-sizing: border-box;
		overflow: hidden !important;
		background: #eaeaea;
		// color: #333;

		.searchBoxs {
			height: 80rpx;
		}

		.searchBox {
			.dflexsb();
			width: 90%;
			padding: 5rpx;
			border-radius: 60px;
			margin: 0 auto;
			background: #fff;
			box-sizing: border-box;

			.inputBox {
				position: relative;
				width: 80%;
				height: 70rpx;
				border-radius: 60px;
				background: #fff;
				// border-radius: 10rpx;

				.searchIcon {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					left: 30rpx;
					top: 30%;
				}

				input {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0rpx;
					border-radius: 60px;
					left: 0rpx;
					padding-left: 80rpx;
					font-size: 26rpx;
					color: #ccc;
					;

					&::placeholder {
						font-size: 26rpx;
						color: #ccc;
					}
				}
			}

			.searchBtn {
				padding: 16rpx 0rpx;
				box-sizing: border-box;
				background-color: #4169E1;
				min-width: 140rpx;
				.dflex();
				color: #fff;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin-left: 20rpx;
			}
		}


		.content {
			height: 100%;
			// overflow-y: scroll;

			.list {
				height: 100%;
				overflow-y: scroll;
				padding-bottom: 300rpx;
				box-sizing: border-box;
			}

			.itemJob {
				padding: 30rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 60rpx;
				margin-bottom: 30rpx;

				.iTop {
					font-size: 26rpx;
					font-weight: bolder;
					padding: 0rpx 10rpx;
					box-sizing: border-box;
					.dflexsb();

					.jobName {
						width: 60%;
					}

					.money {
						flex: 1;
						color: red;
						.dflex();
						justify-content: flex-end;
					}
				}

				.badge {
					.dflex();
					justify-content: flex-start;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.badgeItem {
						padding: 4rpx 14rpx;
						box-sizing: border-box;
						background: #55aaff;
						color: #fff;
						margin-right: 14rpx;
						border-radius: 12rpx;
						.dflex();
						font-size: 30rpx;
					}
				}

				.info {
					font-size: 30rpx;
					// color: #bebebe;
					margin-top: 20rpx;
					padding: 0rpx 20rpx 0rpx 0rpx;
					box-sizing: border-box;
				}

				.cInfo {
					.dflexsb();
					margin-top: 24rpx;

					.hr {
						width: 70%;
						.dflex();
						justify-content: flex-start;

						.hrHeader {
							width: 46rpx;
							height: 46rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}

						text {
							font-size: 24rpx;
						}
					}

					.address {
						flex: 1;
						font-size: 24rpx;
						color: #bebebe;
					}
				}
			}
		}
	}
</style>